import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { deviceWidth } from 'src/util'
import Modal from 'react-native-modal'
import { deviceHeight, titleHeight } from '../../../../util';
import { Flex } from '@ant-design/react-native';


export default class payWayView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: false,
            payWay: 0,
        }
    }



    selectedPayWay = (flag) => {
        this.setState({ payWay: flag });
    }

    showOrDismiss = (flag) => {
        this.setState({ isVisible: flag });
    }

    componentDidMount = () => {
        this.state.isVisible = this.props.isVisible;
    }

    WeChatView = (flag) => {
        return (
            <Flex style={styles.cellView} justify='between' align='center' onPress={() => {
                this.props.weChat()
            }}>
                <View style={{ flexDirection: 'row' }}>
                    <Image style={styles.image} source={require('src/assets/weixinzhifu.png')}></Image>
                    <Text style={styles.TextPosition}>微信支付</Text>
                </View>
                <Image style={{ width: 25, height: 25 }} source={flag == 0 ? require('src/assets/gou1.png') : require('src/assets/gou0.png')}></Image>
            </Flex>
        )
    }

    AlipayView = (flag) => {
        return (
            <Flex style={styles.cellView} justify='between' align='center' onPress={() => {
                this.props.aliPay()
            }}>
                <View style={{ flexDirection: 'row' }}>
                    <Image style={styles.image} source={require('src/assets/zhifubaozhifu.png')}></Image>
                    <Text style={styles.TextPosition}>支付宝支付</Text>
                </View>
                <Image style={{ width: 25, height: 25 }} source={flag == 1 ? require('src/assets/gou1.png') : require('src/assets/gou0.png')}>
                </Image>
            </Flex>
        )
    }

    render() {

        return (
            <Modal isVisible={this.state.isVisible}
                animationInTiming={400}
                animationOutTiming={100}
                swipeDirection="up"
                animationOut={'slideOutDown'}
                backdropOpacity={0.2}
                style={{
                    marginLeft: 10,
                    marginRight: 10,
                    justifyContent: 'flex-start',
                    marginTop: titleHeight,
                }}
                onBackdropPress={() => {
                    this.showOrDismiss(false);
                }}>
                <View style={{ alignItems: 'center', backgroundColor: '#fff', height: deviceHeight - titleHeight, borderRadius: 10 }}>
                    <Flex
                        style={{ position: 'absolute', left: 20, top: 10 }}
                        onPress={() => {
                            this.props.close()
                        }}>
                        <Image
                            style={{ width: 25, height: 25 }}
                            source={require('src/assets/chaClose.png')}
                        >
                        </Image>
                    </Flex>

                    <View style={{ marginTop: 80 }}></View>
                    <Text style={{ color: '#2E2E2E', fontSize: 16, fontWeight: 'bold' }}>需支付的金额</Text>
                    <Text style={{ color: '#378EFB', fontSize: 40, marginTop: 20, fontWeight: 'bold' }}>¥178.00</Text>
                    <Text style={{ color: '#2E2E2E', fontSize: 13, marginTop: 50, marginHorizontal: 20 }}>付款说明：购买缔盟信用管家使用权，终身免费使用，获取终身免费使用权！</Text>
                    <View style={{ marginTop: 20, backgroundColor: '#F5F5F5', height: 1, width: deviceWidth - 60 }} />
                    {this.WeChatView(this.state.payWay)}
                    {this.AlipayView(this.state.payWay)}
                    <Flex justify='center' align='center' style={{ marginTop: 20, borderRadius: 8, width: deviceWidth - 60, height: 50, backgroundColor: '#378EFB' }} onPress={() => {
                        this.props.payMoney(this.state.payWay)
                    }}>
                        <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 16 }}>立即支付</Text>

                    </Flex>

                </View>
            </Modal>

        )
    }
}

const styles = StyleSheet.create({
    image: {
        width: 40,
        height: 40,
        marginLeft: 20
    },
    TextPosition: {
        marginTop: 10,
        marginLeft: 15,
        fontSize: 15
    },
    cellView: {
        height: 80,
        width: deviceWidth,
        paddingLeft: 20,
        paddingRight: 30
    }

})